<template>
  <div class="logistics-city inset-shadow">
    <cardTitle text="物流城市方向"/>
    <div class="card-right-1 logistics-city-map">

    </div>
  </div>
</template>

<script>
import cardTitle from '../cardTitle.vue'
import * as echarts from 'echarts'
import chinaJson from "../../map/china.json"
export default {
  name: "logisticsCity",
  props: {},
  components: {cardTitle},
  data () {
    return {
      chinaJson
    };
  },
  computed: {},
  watch: {},
  created () {
  },
  mounted () {
    this.initRadarChart()
  },
  methods: {
    initRadarChart () {
      const dom = document.querySelector(".logistics-city-map")
      const chart = echarts.init(dom)
      echarts.registerMap('china', this.chinaJson)
      chart.setOption({
          // backgroundColor: 'transparent',
          tooltip: {
            trigger: 'item',
            formatter: function (params) {
              if (params.seriesType == 'lines') {
                return params.data.from + ' > ' + params.data.to + '<br/>' + params.data.value;
              } else if (params.seriesType == 'scatter') {
                return params.data.name;
              }
            }
          },
          legend: {
            orient: 'vertical',
            left: 'left',
            data: ['中国'],
            textStyle: {
              color: '#fff'
            }
          },
          geo: {
            map: 'china',
            label: {
              emphasis: {
                show: false
              }
            },
            roam: true,
            itemStyle: {
              normal: {
                areaColor: '#05172c',
                borderColor: '#3499ea'
              },
              emphasis: {
                areaColor: '#3499ea'
              }
            }
          },
          series: [
            {
              name: '采购',
              type: 'lines',
              coordinateSystem: 'geo',
              zlevel: 2,
              effect: {
                show: true,
                period: 6,
                trailLength: 0.7,
                color: '#fff', // 飞线颜色
                symbolSize: 3 // 飞线节点的大小
              },
              lineStyle: {
                normal: {
                  color: '#00b6ff', // 线颜色
                  width: 1, // 线宽
                  opacity: 0.6, // 透明度
                  curveness: 0.2 // 曲度
                }
              },
              data: [ // 飞线数据，格式为 [{from:'起始点', to:'终点', value:'值'}]
                {
                  fromName: '西安',
                  toName: '浙江',
                  coords: [
                    [108.94,34.34], // 起始
                    [120.15,30.27] // 结束
                  ],

                },
                {
                  fromName: '北京',
                  toName: '西藏',
                  coords: [
                    [116.41,39.90], // 起始
                    [91.12,29.65] // 结束
                  ],
                  lineStyle: {
                    normal: {
                      color: '#ec4336', // 线颜色
                      width: 1, // 线宽
                      opacity: 0.6, // 透明度
                      curveness: 0.3 // 曲度
                    }
                  },
                }
              ]
            },
            {
              name: '销售',
              type: 'lines',
              coordinateSystem: 'geo',
              zlevel: 2,
              effect: {
                show: true,
                period: 6,
                trailLength: 0.7,
                color: '#fff', // 飞线颜色
                symbolSize: 3 // 飞线节点的大小
              },
              lineStyle: {
                normal: {
                  color: '#00b6ff', // 线颜色
                  width: 1, // 线宽
                  opacity: 0.6, // 透明度
                  curveness: 0.2 // 曲度
                }
              },
              data: [ // 飞线数据，格式为 [{from:'起始点', to:'终点', value:'值'}]
                {
                  fromName: '西安',
                  toName: '浙江',
                  coords: [
                    [108.94,34.34], // 起始
                    [120.15,30.27] // 结束
                  ],

                },
                {
                  fromName: '北京',
                  toName: '西藏',
                  coords: [
                    [116.41,39.90], // 起始
                    [91.12,29.65] // 结束
                  ],
                  lineStyle: {
                    normal: {
                      color: '#ec4336', // 线颜色
                      width: 1, // 线宽
                      opacity: 0.6, // 透明度
                      curveness: 0.3 // 曲度
                    }
                  },
                }
              ]
            }
            ]
        }
      )
      window.addEventListener('resize', function () {
        chart.resize()
      })
    }
  },

};
</script>

<style lang="scss" scoped>
@import "../../scss/common.scss";

.logistics-city {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.card-right-1 {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 16px 10px 16px;
  box-sizing: border-box;
}
</style>
